<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Yahoo! User Interface Library (YUI): Index of Library Examples</title>
    

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../assets/title_h_bg.gif);}

</style>

<!--Script and CSS includes for YUI dependencies on this page-->
<script type="text/javascript" src="../../build/yuiloader-dom-event/yuiloader-dom-event.js"></script>

<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
	YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class="">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="vs" type="hidden" value="yuiblog.com">
		<div id="sitesearch">
			<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			<input type="text" id="searchinput" name="p">
			<input type="submit" value="Search" id="searchsubmit" class="ygbt">
		</div>
		</form>	</div>
	<div id="ygma"><a href="../"><img src="../assets/yui.gif"  border="0" height="38"></a></div>
	<div id="pagetitle"><h1>Yahoo! User Interface Library (YUI): Index of Library Examples</h1></div>
</div>
<div id="bd">
<div id="yui-main">
	<div class="yui-b">
	  <div class="yui-ge">
		  <div class="yui-u first">
		  
		  
   <style type="text/css">
	   table.examplesTable {margin-top:1.7em;}
	   .examplesTable td {border:1px solid #dedede; padding:2px; font-size:100%; vertical-align:top;}
	   .examplesTable td.title {width:25%;}
	   .examplesTable td.description {width:65%;}
	   .examplesTable tr.odd {background-color:#DBEBF3;}
	   .examplesTable th {border:1px solid #dedede; padding:2px; background-color:#0066CC; color:#CCCCCC; font-weight:bold; font-size:100%;}
	   .examplesTable th.title {background-color:#F4F4F4;}
	   h1, h2, h3 {margin-top:.7em; margin-bottom:.2em; font-weight:bold; border-top:none;}
	   h1 {font-size:144%;}
	   h2 {font-size:129%; border-bottom:1px solid #dedede;}
	   h3 {font-size:114%; display:inline; margin-bottom:0;}
	   #secondaryContent {border-left:1px solid #dedede; padding-left:1em;}
   </style>
	
<h1 class="firstContent">YUI Library: Index of Official Examples</h1>
	
<p>Every YUI Library component ships with a series of 315 examples that illustrate its implementation.  These examples can serve as starting points for your exploration of YUI, as code snippets to get you started in your own programming, or simply as an inspiration as to how various interaction patterns can be enabled in the web browser via YUI.</p>

<p>The navigation controls on the left side of this page allow you to explore these examples component-by-component; on this page you'll find the full index of library examples with a link to and short description of each one.</p>

<h2>CSS Foundation</h2><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Base CSS</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='base/base-simple.html'>Basic Test Suite for YUI Base</a></td><td class='description'>YUI Base CSS provides a consistent and legible rendering of HTML elements; this example gives you a straightforward look at how Base styles common HTML elements.</td></tr>
<tr class='even'><td class='title'><a href='base/base-in-doc.html'>YUI Base, 750px</a></td><td class='description'>Base CSS and the full YUI CSS Foundation in a 750px-wide YUI CSS Grid.</td></tr>
<tr class='odd'><td class='title'><a href='base/base-in-doc2.html'>YUI Base, 950px</a></td><td class='description'>Base CSS and the full YUI CSS Foundation in a 950px-wide YUI CSS Grid.</td></tr>
<tr class='even'><td class='title'><a href='base/base-in-doc4.html'>YUI Base, 974px</a></td><td class='description'>Base CSS and the full YUI CSS Foundation in a 974px-wide YUI CSS Grid.</td></tr>
<tr class='odd'><td class='title'><a href='base/base-in-doc3.html'>YUI Base, 100%</a></td><td class='description'>Base CSS and the full YUI CSS Foundation in a 100%-of-page-width YUI CSS Grid.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Fonts CSS</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='fonts/fonts-simple.html'>Basic Test Suite for YUI Fonts</a></td><td class='description'>Put Fonts on a page to achieve consistent font-styling and line-height characteristics.</td></tr>
<tr class='even'><td class='title'><a href='fonts/fonts-size.html'>Setting the font size</a></td><td class='description'>Use percentages to specify font sizes when using YUI Fonts.</td></tr>
<tr class='odd'><td class='title'><a href='fonts/fonts-family.html'>Setting the font family</a></td><td class='description'>Specify the font family you want and let YUI Fonts handle alternative fallback font-families.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Grids CSS</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='grids/grids-doc.html'>Page Width = 750px</a></td><td class='description'>Use Grids' preset page width of 750px.</td></tr>
<tr class='even'><td class='title'><a href='grids/grids-doc2.html'>Page Width = 950px</a></td><td class='description'>Use Grids' preset page width of 950px.</td></tr>
<tr class='odd'><td class='title'><a href='grids/grids-doc4.html'>Page Width = 974px</a></td><td class='description'>Use Grids' preset page width of 974px.</td></tr>
<tr class='even'><td class='title'><a href='grids/grids-doc3.html'>Page Width = 100%</a></td><td class='description'>Use Grids' preset page width of 100%.</td></tr>
<tr class='odd'><td class='title'><a href='grids/grids-doc-custom.html'>Custom Page Width</a></td><td class='description'>Specify an arbitrary page width.</td></tr>
<tr class='even'><td class='title'><a href='grids/grids-t1.html'>Preset Template 1, 160px left</a></td><td class='description'>Use Grids' preset templates to put a 160px narrow column on the left side.</td></tr>
<tr class='odd'><td class='title'><a href='grids/grids-t2.html'>Preset Template 2, 180px left</a></td><td class='description'>Use Grids' preset templates to put a 180px narrow column on the left side.</td></tr>
<tr class='even'><td class='title'><a href='grids/grids-t3.html'>Preset Template 3, 300px left</a></td><td class='description'>Use Grids' preset templates to put a 300px narrow column on the left side.</td></tr>
<tr class='odd'><td class='title'><a href='grids/grids-t4.html'>Preset Template 4, 180px right</a></td><td class='description'>Use Grids' preset templates to put a 180px narrow column on the right side.</td></tr>
<tr class='even'><td class='title'><a href='grids/grids-t5.html'>Preset Template 5, 240px right</a></td><td class='description'>Use Grids' preset templates to put a 240px narrow column on the right side.</td></tr>
<tr class='odd'><td class='title'><a href='grids/grids-t6.html'>Preset Template 6, 300px right</a></td><td class='description'>Use Grids' preset templates to put a 300px narrow column on the right side.</td></tr>
<tr class='even'><td class='title'><a href='grids/grids-g.html'>Standard Nesting Grid (1/2 - 1/2)</a></td><td class='description'>The buiding block of nested grids is the Standard Nesting Grid which creates to evenly-wide child columns. Learn how in this example.</td></tr>
<tr class='odd'><td class='title'><a href='grids/grids-gb.html'>Special Nesting Grid "B" (1/3, 1/3, 1/3)</a></td><td class='description'>What you need an odd number of columns, or unevenly divided space, use Special Nesting Grids instead of Standard Nesting Grids.</td></tr>
<tr class='even'><td class='title'><a href='grids/grids-gc.html'>Special Nesting Grid "C" (2/3, 1/3)</a></td><td class='description'>Create two uneven columns with this Special Nesting Grid.</td></tr>
<tr class='odd'><td class='title'><a href='grids/grids-gd.html'>Special Nesting Grid "D" (1/3, 2/3)</a></td><td class='description'>Create two uneven columns with this Special Nesting Grid.</td></tr>
<tr class='even'><td class='title'><a href='grids/grids-ge.html'>Special Nesting Grid "E" (3/4, 1/4)</a></td><td class='description'>Create two uneven columns with this Special Nesting Grid.</td></tr>
<tr class='odd'><td class='title'><a href='grids/grids-gf.html'>Special Nesting Grid "F" (1/4, 3/4)</a></td><td class='description'>Create two uneven columns with this Special Nesting Grid.</td></tr>
<tr class='even'><td class='title'><a href='grids/grids-gg.html'>Nested Standard Nesting Grids (1/4 - 1/4 - 1/4 - 1/4)</a></td><td class='description'>Create more than 2 (or 3) columns by nesting grids. This example shows a four-column even-width layout achieved by nesting Standard Nesting Grids inside of Standard Nesting Grids.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Reset CSS</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='reset/reset-simple.html'>Basic Test Suite for YUI Reset</a></td><td class='description'>YUI Reset is the lowest-level member of YUI's CSS suite. It normalizes the rendering of HTML elements and provides a level playing field upon which to write CSS.</td></tr>
</tbody>
</table>

<h2>YUI's Core JavaScript Components</h2><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Dom Collection</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='dom/setxy.html'>Using setXY</a></td><td class='description'>Positioning elements relative to the document coordinate system can be quite a challenge.  The Dom Utility provides this method to do it for you.</td></tr>
<tr class='even'><td class='title'><a href='dom/getxy.html'>Using getXY</a></td><td class='description'>Getting element positions relative to the document coordinate system can be quite a challenge.  The Dom Utility provides this method to do it for you.</td></tr>
<tr class='odd'><td class='title'><a href='dom/setstyle.html'>Using setStyle</a></td><td class='description'>There are some differences between browsers regarding how style properties are set on HTMLElements.  This method normalizes those for you.</td></tr>
<tr class='even'><td class='title'><a href='dom/getstyle.html'>Using getStyle</a></td><td class='description'>There are some differences between browsers regarding how style properties are retrieved from HTMLElements.  This method normalizes those for you.</td></tr>
<tr class='odd'><td class='title'><a href='dom/hasclass.html'>Using hasClass</a></td><td class='description'>This method allows you to test for the presence of a <code>className</code> on an HTMLElement.</td></tr>
<tr class='even'><td class='title'><a href='dom/addclass.html'>Using addClass</a></td><td class='description'>This method allows you to add a className to an HTMLElement.</td></tr>
<tr class='odd'><td class='title'><a href='dom/removeclass.html'>Using removeClass</a></td><td class='description'>This method allows you to remove a <code>className</code> from an HTMLElement.</td></tr>
<tr class='even'><td class='title'><a href='dom/getelementsbyclassname.html'>Using getElementsByClassName</a></td><td class='description'>This method allows you select all of the HTMLElements on a given page that share a specific <code>className</code>.</td></tr>
<tr class='odd'><td class='title'><a href='dom/dom-explorer.html'>Exploring the Dom Collection's API</a></td><td class='description'>The Dom Collection Explorer allows you to interact with some of the oft-used element-targeting functions in the YUI Dom Collection.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Event Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='event/eventsimple.html'>Simple Event Handling and Processing</a></td><td class='description'>Demonstrates simple event attachment and use of Event Utility to provide browser-neutral methods for acting on event objects.</td></tr>
<tr class='even'><td class='title'><a href='event/custom-event.html'>Using Custom Events</a></td><td class='description'>Custom Events are an excellent way to publish and subscribe to interesting moments in your own scripts.</td></tr>
<tr class='odd'><td class='title'><a href='event/event-timing.html'>Using onAvailable, onContentReady, and onDOMReady</a></td><td class='description'>Event Utility gives you control over when you execute your scripts.  In addition to the window's <code>load</code> event, Event Utility lets you know when an element is available, when its children are available, and when the page's full DOM is available.</td></tr>
<tr class='even'><td class='title'><a href='event/event-delegation.html'>Using Event Utility and Event Delegation to Improve Performance</a></td><td class='description'>Assigning events to parent elements allows you to listen for those same events on descendant elements, reducing the number of event listeners you need in your application.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>YAHOO Global Object</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='yahoo/yahoo_type_checking.html'>Type-Checking Your Data</a></td><td class='description'>Use the <code>YAHOO.lang</code> type checking methods to deal with unpredictable data</td></tr>
<tr class='even'><td class='title'><a href='yahoo/yahoo_ua_detection.html'>User Agent Detection</a></td><td class='description'><code>YAHOO.env.ua</code> can tell you with some accuracy which browser your page is being viewed in.</td></tr>
<tr class='odd'><td class='title'><a href='yahoo/yahoo_extend.html'>Creating Class Hierarchies with <code>YAHOO.lang.extend</code></a></td><td class='description'>Leverage class inheritance in an object-oriented architecture.</td></tr>
<tr class='even'><td class='title'><a href='yahoo/yahoo_augment_proto.html'>Creating a Composition-Based Class Structure Using <code>YAHOO.lang.augmentProto</code></a></td><td class='description'>Use <code>YAHOO.lang.augmentProto</code> to help modularize class behaviors.</td></tr>
<tr class='odd'><td class='title'><a href='yahoo/yahoo_augment_object.html'>Add Behavior to Objects or Static Classes with <code>YAHOO.lang.augmentObject</code></a></td><td class='description'>Use <code>augmentObject</code> to extend static classes, object literals, or class instances.</td></tr>
<tr class='even'><td class='title'><a href='yahoo/yahoo_merge.html'>Combining Simple Data Sets with <code>YAHOO.lang.merge</code></a></td><td class='description'>Merge several objects, creating a unique set.</td></tr>
</tbody>
</table>

<h2>YUI Utilities</h2><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Animation Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='animation/basic.html'>Basic Animation</a></td><td class='description'>Creating and using a simple animation.</td></tr>
<tr class='even'><td class='title'><a href='animation/easing.html'>Animation Easing</a></td><td class='description'>The Animation Utility allows you to implement 'easing effects' &mdash; for example, when an animation gradually slows down as it nears completion, that's an easing effect known as 'ease-in'.  This example shows you how to use easing effects with your animations.</td></tr>
<tr class='odd'><td class='title'><a href='animation/from.html'>Animating From a Given Value</a></td><td class='description'>Animations usually begin with the current value (e.g., a motion animation usually begins with the current position of the moving element).  However, the starting position can be customized; this example shows you how.</td></tr>
<tr class='even'><td class='title'><a href='animation/units.html'>Using Custom Units for an Animation</a></td><td class='description'>By default, animations are set in terms of a property's default units (often pixels or percent).  This example shows you how to specificy custom units with Animation.</td></tr>
<tr class='odd'><td class='title'><a href='animation/attributes.html'>Animating Multiple Attributes</a></td><td class='description'>This example demonstrates how to animate multiple attributes of an HTMLElement.</td></tr>
<tr class='even'><td class='title'><a href='animation/anim-chaining.html'>Chaining Animations Using <code>onComplete</code></a></td><td class='description'>Animations can be chained (set to fire sequentially) using Animation's onComplete custom event; this simple example shows you how.</td></tr>
<tr class='odd'><td class='title'><a href='animation/colors.html'>Animating Colors</a></td><td class='description'>Color animations can be effective indicators of state during the lifespan of a dynamic page.  This example shows you how to animate color attributes of an HTMLElement.</td></tr>
<tr class='even'><td class='title'><a href='animation/motion.html'>Animating Motion</a></td><td class='description'>This example shows you how to animate the motion path of an HTMLElement.</td></tr>
<tr class='odd'><td class='title'><a href='animation/control.html'>Animating Along a Curved Path</a></td><td class='description'>This example explores motion animation by moving an HTMLElement along a curved path using control points.</td></tr>
<tr class='even'><td class='title'><a href='animation/scroll.html'>Animated Scrolling</a></td><td class='description'>This example shows how to animate the scrolling of an HTMLElement.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Browser History Manager</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='history/history-navbar.html'>Simple Navigation Bar</a></td><td class='description'>Use the Browser History Manager to "ajaxify" a simple navigation bar without compromising the use of the back/forward buttons.</td></tr>
<tr class='even'><td class='title'><a href='history/history-tabview.html'>TabView Control</a></td><td class='description'>The Browser History Manager is used here to remember which tabs have been visited.</td></tr>
<tr class='odd'><td class='title'><a href='history/history-calendar.html'>Calendar Control</a></td><td class='description'>Go from month to month using the controls on the calendar widget and go back to previously viewed months using the browser's back button.</td></tr>
<tr class='even'><td class='title'><a href='history/history-multiple.html'>Multiple Modules</a></td><td class='description'>This example shows how to use the Browser History Manager with several modules on a page.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Connection Manager</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='connection/get.html'>Connection Manager GET Transaction</a></td><td class='description'>Uses Connection Manager to demonstrate an HTTP GET request.</td></tr>
<tr class='even'><td class='title'><a href='connection/post.html'>Connection Manager POST Transaction</a></td><td class='description'>Explores the use of HTTP POST to send data to the server and retrieve the server's response.</td></tr>
<tr class='odd'><td class='title'><a href='connection/abort.html'>Connection Manager Transaction Timeout</a></td><td class='description'>Connection Manager's built-in transaction timeout feature allows you to abort requests that are too slow in returning data.</td></tr>
<tr class='even'><td class='title'><a href='connection/weather.html'>Retrieving a Yahoo! Weather RSS Feed</a></td><td class='description'>Demonstrates how to retrieve XML data from a web service and make use of that information within the page.</td></tr>
<tr class='odd'><td class='title'><a href='connection/global_customevents.html'>Subscribing to Connection Manager Global Events</a></td><td class='description'>Subscribe to Custom Events for an aspect-oriented approach to managing transactions and response data.</td></tr>
<tr class='even'><td class='title'><a href='connection/callback_customevents.html'>Subscribing to Connection Manager's Custom Events via the Callback Object</a></td><td class='description'>Target and handle Custom Events for specific transactions using the callback object.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Cookie Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='cookie/cookie-simple-example.html'>Simple Cookie Example</a></td><td class='description'>Demonstrates basic usage of the Cookie utility for reading and writing cookies.</td></tr>
<tr class='even'><td class='title'><a href='cookie/cookie-advanced-example.html'>Advanced Cookie Example</a></td><td class='description'>Demonstrates using the Cookie utility to get, set and remove cookies.</td></tr>
<tr class='odd'><td class='title'><a href='cookie/cookie-subcookie-example.html'>Subcookie Example</a></td><td class='description'>Demonstrates using the Cookie utility to get and set subcookies.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>DataSource Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='datasource/datasource_table_to_array.html'>Extracting data from an HTML table</a></td><td class='description'>Extract data from an HTML table into an array of object records</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Drag &amp; Drop</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='dragdrop/dd-basic.html'>Basic Drag and Drop</a></td><td class='description'>This example demonstrates the basics of drag and drop.</td></tr>
<tr class='even'><td class='title'><a href='dragdrop/dd-handles.html'>Using Handles</a></td><td class='description'>This examples shows how to define drag handles.</td></tr>
<tr class='odd'><td class='title'><a href='dragdrop/dd-ontop.html'>Dragged Element on Top</a></td><td class='description'>Demonstrates how to use Drag &amp; Drop's event API to force a dragged element to draw on top of the other drag-and-drop elements.</td></tr>
<tr class='even'><td class='title'><a href='dragdrop/dd-proxy.html'>Using a Proxy Element</a></td><td class='description'>Demonstrates the built-in proxy-drag feature of drag and drop.</td></tr>
<tr class='odd'><td class='title'><a href='dragdrop/dd-reorder.html'>Reordering a List</a></td><td class='description'>Demonstrates how to use drag and drop to reorder a list.</td></tr>
<tr class='even'><td class='title'><a href='dragdrop/dd-groups.html'>Using Interaction Groups</a></td><td class='description'>Demonstrates how to use multiple drag-and-drop interaction groups.</td></tr>
<tr class='odd'><td class='title'><a href='dragdrop/dd-circle.html'>Custom Click Validator</a></td><td class='description'>Demonstrates one way to implement a draggable panel.</td></tr>
<tr class='even'><td class='title'><a href='dragdrop/dd-region.html'>Staying in a Region</a></td><td class='description'>Demonstrates one way to implement dragging elements in a Region.</td></tr>
<tr class='odd'><td class='title'><a href='dragdrop/dd-shim.html'>Using the Drag Shim</a></td><td class='description'>This example shows the use of the drag shim when dragging nodes over other troublesome nodes.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Get Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='get/get-script-simple.html'>Quickstart Example: Getting a Script File with YUI Get</a></td><td class='description'>This example illustrates the simplest use case in which the Get Utility is used to retrieve a script file.</td></tr>
<tr class='even'><td class='title'><a href='get/get-script-basic.html'>Getting a Script Node with JSON Data from a Web Service</a></td><td class='description'>This example shows how to retrieve JSON data from a web service using the YUI Get Utility and how to then display that data on the page.</td></tr>
<tr class='odd'><td class='title'><a href='get/get-css-basic.html'>Getting CSS Style Sheets</a></td><td class='description'>Attach and remove stylesheets using the Get Utility.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>ImageLoader Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='imageloader/imgloadbasics.html'>Basic Features of the ImageLoader Utility</a></td><td class='description'>Demonstrates the basic features and operation of the ImageLoader Utility, deferring the loading of images until specific targets are hit or specific timers expire.</td></tr>
<tr class='even'><td class='title'><a href='imageloader/imgloadfold.html'>Loading Images Below the Fold</a></td><td class='description'>Loading images above the fold immediately while deferring the loading of images below the fold.</td></tr>
<tr class='odd'><td class='title'><a href='imageloader/imgloadclass.html'>Using ImageLoader with CSS Class Names</a></td><td class='description'>Using CSS class names to target specific images for deferred loading.</td></tr>
<tr class='even'><td class='title'><a href='imageloader/imgloadtabs.html'>ImageLoader with TabView</a></td><td class='description'>Using ImageLoader with the TabView Control and determining which triggers to set for image groups.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>JSON Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='json/json_connect.html'>JSON with Connection Manager</a></td><td class='description'>Use the JSON Utility to parse data received from Connection Manager calls</td></tr>
<tr class='even'><td class='title'><a href='json/json_freeze_thaw.html'>Rebuilding class instances from JSON data</a></td><td class='description'>Using the replacer and reviver parameters to reconstitute object instances</td></tr>
<tr class='odd'><td class='title'><a href='json/json_convert_values.html'>Adding new object members during parsing</a></td><td class='description'>Using a currency conversion calculation to add a new price member to a JSON response</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Resize Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='resize/simple_resize.html'>Simple Resize</a></td><td class='description'>This example shows how to make a DIV resizable.</td></tr>
<tr class='even'><td class='title'><a href='resize/proxy_resize.html'>Proxy Resize</a></td><td class='description'>This example shows how to make a DIV resizable, using a proxy element.</td></tr>
<tr class='odd'><td class='title'><a href='resize/anim_resize.html'>Animated Proxy Resize</a></td><td class='description'>This example shows how to make a DIV resizable, using a proxy element and animation.</td></tr>
<tr class='even'><td class='title'><a href='resize/eightway_resize.html'>8-way Element Resize</a></td><td class='description'>This example shows how to make an element resizable by all 8 handles.</td></tr>
<tr class='odd'><td class='title'><a href='resize/ghost_resize.html'>Ghosting and Custom Proxy Resize</a></td><td class='description'>This example shows how to use ghosting and manipulate the proxy element.</td></tr>
<tr class='even'><td class='title'><a href='resize/rte_resize.html'>Custom resizing for the Rich Text Editor</a></td><td class='description'>This example shows how to customize the Resize Utility for things like the Rich Text Editor.</td></tr>
<tr class='odd'><td class='title'><a href='resize/grids_resize.html'>Split Pane resizing with Grids CSS</a></td><td class='description'>This example shows how to make a resizable split pane with Grids CSS.</td></tr>
<tr class='even'><td class='title'><a href='resize/skinning_resize.html'>Skinning the Resize Utility</a></td><td class='description'>Resize skinning is done via CSS.  The Resize Utility comes with a default skin, but you can extend or override this as needed.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Selector Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='selector/query.html'>Using query</a></td><td class='description'>The <code>query</code> method retrieves an array of DOM elements that match the provided selector.</td></tr>
<tr class='even'><td class='title'><a href='selector/filter.html'>Using filter</a></td><td class='description'>The <code>filter</code> method filters a collection of nodes based on the provided selector.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>StyleSheet Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='stylesheet/stylesheet_theme.html'>Using StyleSheet to create a page theme</a></td><td class='description'>Use the StyleSheet Utility to adjust a page's theme</td></tr>
<tr class='even'><td class='title'><a href='stylesheet/stylesheet_anim_multi.html'>Animating multiple elements with StyleSheet</a></td><td class='description'>Using a single Anim instance with StyleSheet to animate multiple elements</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>YUI Loader Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='yuiloader/yl-basic.html'>Using YUI Loader to Load the Calendar Control</a></td><td class='description'>This example demonstrates a simple implementation in which we bring in the YUI Calendar Control &mdash; and its JavaScript and CSS dependencies &mdash; using the YUI Loader Utility.</td></tr>
<tr class='even'><td class='title'><a href='yuiloader/yl-insert.html'>Using YUI Loader to Place Additional Components on a Page</a></td><td class='description'>In some cases, you may wish to use YUI Loader to bring additional components into a page that already contains some YUI content.  In this example, we'll look at how to use YUI Loader to augment a page's existing YUI content by bringing in additional dependencies for a new component.</td></tr>
<tr class='odd'><td class='title'><a href='yuiloader/yl-addmodule.html'>Using addModule to Add Custom (Non-YUI) Content with YUILoader</a></td><td class='description'>YUILoader can be used to add YUI components to the page, but it can also be used to add other components that you create yourself (or that you pull from a third-party source).  This example shows one simple way to pull in external content with YUILoader.</td></tr>
<tr class='even'><td class='title'><a href='yuiloader/yl-list.html'>Use YUILoader to list requirements for a set of components.</a></td><td class='description'>Select one or more YUI components and see an optimized list of file includes.</td></tr>
</tbody>
</table>

<h2>YUI Widgets</h2><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>AutoComplete Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='autocomplete/ac_basic_array.html'>Basic Local Data</a></td><td class='description'>Demonstrates the use of a manageably large JavaScript array to provide responsive, in-memory AutoComplete functionality without relying on a server-side component.</td></tr>
<tr class='even'><td class='title'><a href='autocomplete/ac_basic_xhr.html'>Basic Remote Data</a></td><td class='description'>Uses an XHRDataSource to point to an online script serving delimited text data</td></tr>
<tr class='odd'><td class='title'><a href='autocomplete/ac_xhr_customrequest.html'>Customizing Remote Requests</a></td><td class='description'>Uses an XHRDataSource plus a local proxy to point to the Yahoo! Search webservice. The generateRequest() method must be customized to comply with the third-party API.</td></tr>
<tr class='even'><td class='title'><a href='autocomplete/ac_formatting_proxyless.html'>Custom Formatting, with a Proxyless Remote DataSource</a></td><td class='description'>Uses a ScriptNodeDataSource to point to the Yahoo! Autdio Search webservice without a proxy. The generateRequest() method must be customized to comply with the third-party API. A custom formatResults() method has been defined to show thumbnail images within the results container.</td></tr>
<tr class='odd'><td class='title'><a href='autocomplete/ac_itemselect.html'>Searching Field A, Submitting Field B with itemSelectEvent</a></td><td class='description'>Uses itemSelectEvent to allow the user to search by name, but sumbits ID for the server to consume.</td></tr>
<tr class='even'><td class='title'><a href='autocomplete/ac_combobox.html'>Combobox, with CSS for Multiple Stacked Instances</a></td><td class='description'>This Combobox example also demonstrates CSS required to support multiple stacked instances.</td></tr>
<tr class='odd'><td class='title'><a href='autocomplete/ac_tags_alwaysshow.html'>Tagging Example with alwaysShowContainer</a></td><td class='description'>Uses alwaysShowContainer to display and filter tags.</td></tr>
<tr class='even'><td class='title'><a href='autocomplete/ac_fn_multfields.html'>FunctionDataSource to Search Multiple Fields of an Address Book at Runtime</a></td><td class='description'>Searches against first name, last name, and nickname using a FunctionDataSource</td></tr>
<tr class='odd'><td class='title'><a href='autocomplete/ac_ysearch_json.html'>Centering AutoComplete On a Page</a></td><td class='description'>Illustrates how to customize AutoComplete to be centered on a page.</td></tr>
<tr class='even'><td class='title'><a href='autocomplete/ac_ysearch_flat.html'>Subset Matching</a></td><td class='description'>Demonstrates how queryMatchSubset can be enabled to maximize caching. Note the custom CSS that is needed for stacking AutoComplete instances.</td></tr>
<tr class='odd'><td class='title'><a href='autocomplete/ac_flickr_xml.html'>Find Photos on Flickr</a></td><td class='description'>Uses AutoComplete to find photos on Flickr by tag, and keeps a collection of selected photos on the page.</td></tr>
<tr class='even'><td class='title'><a href='autocomplete/ac_customize.html'>Configurations Dashboard</a></td><td class='description'>An interactive dashboard that allows you to manipulate many of AutoComplete's built-in configuration options and explore the impact of those changes on the UI.</td></tr>
<tr class='odd'><td class='title'><a href='autocomplete/ac_skinning.html'>Skinning Model</a></td><td class='description'>Explanation of AutoComplete's skinning model.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Button Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='button/btn_example01.html'>Push Buttons</a></td><td class='description'>This example explores various ways to create a Push Button.</td></tr>
<tr class='even'><td class='title'><a href='button/btn_example02.html'>Link Buttons</a></td><td class='description'>Link Buttons function like HTML anchor elements; this example shows you several ways to create Link Buttons.</td></tr>
<tr class='odd'><td class='title'><a href='button/btn_example03.html'>Checkbox Buttons</a></td><td class='description'>This example demonstrates different ways to create a Button that functions like an HTML checkbox.</td></tr>
<tr class='even'><td class='title'><a href='button/btn_example04.html'>Radio Buttons</a></td><td class='description'>This example demonstrates different ways to create a Button that functions like an HTML radio button.</td></tr>
<tr class='odd'><td class='title'><a href='button/btn_example05.html'>Submit Buttons</a></td><td class='description'>This example demonstrates different ways to create a Button that functions like an HTML submit button.</td></tr>
<tr class='even'><td class='title'><a href='button/btn_example06.html'>Reset Buttons</a></td><td class='description'>This example demonstrates different ways to create a Button that functions like an HTML reset button.</td></tr>
<tr class='odd'><td class='title'><a href='button/btn_example07.html'>Menu Buttons</a></td><td class='description'>With the inclusion of the optional Menu Control, it is possible to create Buttons that incorporate a menu; this example shows you how.</td></tr>
<tr class='even'><td class='title'><a href='button/btn_example08.html'>Split Buttons</a></td><td class='description'>Split Buttons are a hybrid of Menu Buttons and standard buttons; this example shows you how to use the Button Control to create Split Buttons.</td></tr>
<tr class='odd'><td class='title'><a href='button/btn_example09.html'>Simple Calendar Menu Button</a></td><td class='description'>This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.</td></tr>
<tr class='even'><td class='title'><a href='button/btn_example10.html'>Calendar Menu Button with Date on Button Face</a></td><td class='description'>This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar and label reflects the selected date.</td></tr>
<tr class='odd'><td class='title'><a href='button/btn_example11.html'>Color Picker Button</a></td><td class='description'>This example demonstrates how to render a Color Picker into the Menu of a Split Button.</td></tr>
<tr class='even'><td class='title'><a href='button/btn_example12.html'>Fixed Width Menu Button</a></td><td class='description'>This example demonstrates how to create a Menu Button whose text label has a fixed width.</td></tr>
<tr class='odd'><td class='title'><a href='button/btn_example13.html'>Glowing Button</a></td><td class='description'>This example demonstrates how to skin a Button instance to create a glossy, glass-like effect with a glowing background reminiscent of Aqua buttons found in Mac OS X.</td></tr>
<tr class='even'><td class='title'><a href='button/btn_example14.html'>Slider Button</a></td><td class='description'>This example demonstrates how to combine a Split Button with a Slider to create an opacity slider button, similar to that found in Adobe Photoshop.</td></tr>
<tr class='odd'><td class='title'><a href='button/button-ariaplugin.html'>Using the Button ARIA Plugin</a></td><td class='description'>The Button ARIA plugin makes it easy to use the WAI-ARIA Roles and States with the Button control.</td></tr>
<tr class='even'><td class='title'><a href='button/button-menu-select.html'>Using A Menu Button To Replace A &#60;select&#62; Element</a></td><td class='description'>This example illustrates how to use Button to mimic the behavior of an HTML <code>&#60;select&#62;</code> element.</td></tr>
<tr class='odd'><td class='title'><a href='button/button-menu-swap.html'>Replacing the content of a Button's Menu</a></td><td class='description'>This example illustrates how to replace the content of a Button's Menu on the fly.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Calendar Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='calendar/quickstart.html'>Quickstart Tutorial</a></td><td class='description'>Quickly get up and running with the most basic Calendar.</td></tr>
<tr class='even'><td class='title'><a href='calendar/multi.html'>Multi-Select Calendar</a></td><td class='description'>Set up a Calendar that allows for the selection of one or more dates, rather than the single-select default.</td></tr>
<tr class='odd'><td class='title'><a href='calendar/calgrp.html'>Multi-Page Calendar</a></td><td class='description'>Setting up a CalendarGroup to display more than one month at a time.</td></tr>
<tr class='even'><td class='title'><a href='calendar/minmax.html'>Minimum/Maximum Dates</a></td><td class='description'>Configure the Calendar to disallow selection before or beyond specified date limits.</td></tr>
<tr class='odd'><td class='title'><a href='calendar/calnavigator.html'>Calendar Navigator</a></td><td class='description'>Enable the Calendar Navigator, to allow the user to jump straight to a specific month/year</td></tr>
<tr class='even'><td class='title'><a href='calendar/events.html'>Handling Calendar Events</a></td><td class='description'>Use Calendar's events to react to various interesting moments, such as the selection or deselection of dates.</td></tr>
<tr class='odd'><td class='title'><a href='calendar/formtxt.html'>Calendar and Text Fields</a></td><td class='description'>Populate a form's text input field using the Calendar's selected date and vice versa.</td></tr>
<tr class='even'><td class='title'><a href='calendar/formsel.html'>Calendar and Select Fields</a></td><td class='description'>Populate a series of form select input fields using the Calendar's selected date and vice versa.</td></tr>
<tr class='odd'><td class='title'><a href='calendar/render.html'>Using the Render Stack</a></td><td class='description'>Customize how specific dates or date ranges are rendered by plugging in custom renderers.</td></tr>
<tr class='even'><td class='title'><a href='calendar/popup.html'>Popup Calendar - Basic</a></td><td class='description'>Configure either Calendar or CalendarGroup for use as a popup layer that is displayed above the document.</td></tr>
<tr class='odd'><td class='title'><a href='calendar/calcontainer.html'>Popup Calendar - Advanced</a></td><td class='description'>This example wraps Calendar in a Dialog control to provide positioning, button and potentially dragdrop support</td></tr>
<tr class='even'><td class='title'><a href='calendar/intervalcal.html'>Interval Selection Calendar</a></td><td class='description'>This example provides an IntervalCalendar class, a custom version of CalendarGroup which can be used to select start and end dates for date intervals.</td></tr>
<tr class='odd'><td class='title'><a href='calendar/germany.html'>Localization - Germany</a></td><td class='description'>Use localization features to customize the Calendar for use in Germany.</td></tr>
<tr class='even'><td class='title'><a href='calendar/japan.html'>Localization - Japan</a></td><td class='description'>Use localization features to customize the CalendarGroup for use in Japan.</td></tr>
<tr class='odd'><td class='title'><a href='calendar/calskin.html'>Skinning The Calendar</a></td><td class='description'>YUI has a default skin for it's controls called "Sam Skin". This example shares the CSS rules which make up "Sam Skin" for the Calendar and CalendarGroup controls.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Carousel Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='carousel/csl_selection.html'>Spotlight example</a></td><td class='description'>Demonstrates a selection spotlight with the Carousel control.</td></tr>
<tr class='even'><td class='title'><a href='carousel/csl_circular.html'>Circular Carousel example</a></td><td class='description'>Demonstrates a circular Carousel control.</td></tr>
<tr class='odd'><td class='title'><a href='carousel/csl_reveal.html'>Partially revealing previous and next items</a></td><td class='description'>Demonstrates partial revealing of previous and next items in the Carousel Control.</td></tr>
<tr class='even'><td class='title'><a href='carousel/csl_imagentext.html'>Using both images and text within an item</a></td><td class='description'>Demonstrates the use of both images and text within an item in the Carousel Control.</td></tr>
<tr class='odd'><td class='title'><a href='carousel/csl_dynload2.html'>Using Ajax for deferred loading of items</a></td><td class='description'>Demonstrates the use of Ajax for deferred loading of items in the Carousel Control.</td></tr>
<tr class='even'><td class='title'><a href='carousel/csl_pagination.html'>Using Paginator with Carousel</a></td><td class='description'>Demonstrates the use of Paginator for navigating the Carousel control.</td></tr>
<tr class='odd'><td class='title'><a href='carousel/carousel-ariaplugin.html'>Using the Carousel ARIA Plugin</a></td><td class='description'>The Carousel ARIA plugin makes it easy to use the WAI-ARIA Roles and States with the Carousel control.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Charts Control (experimental)</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='charts/charts-quickstart.html'>Charts Quickstart Example</a></td><td class='description'>A demonstration of the Chart control's basic features.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-legend.html'>Chart with Legend Example</a></td><td class='description'>Creates a PieChart with an HTML legend.</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-skins.html'>Skinning a Chart Example</a></td><td class='description'>Modifies the Chart control's styles to give it a custom appearance.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-datatable.html'>Chart and DataTable Example</a></td><td class='description'>A Chart and a DataTable share the same DataSource.</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-xhr-polling.html'>Chart with DataSource Polling</a></td><td class='description'>A Chart polls a DataSource that frequently loads new data through XHR.</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-stacked.html'>Stacked Bar Chart</a></td><td class='description'>Creates a StackedBarChart</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-tabview.html'>Charts in a TabView</a></td><td class='description'>Creates a TabView containing different Chart types</td></tr>
<tr class='even'><td class='title'><a href='charts/charts-rotation.html'>Column Chart with Rotated Title and Labels</a></td><td class='description'>Creates a ColumnChart with a rotated title on the y-axis and rotated labels on the x-axis.</td></tr>
<tr class='odd'><td class='title'><a href='charts/charts-styles.html'>Styling Lines, Borders and Fills</a></td><td class='description'>Creates a LineChart with styled series and a highlighted zero gridline.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Color Picker Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='colorpicker/colorpicker-fromscript.html'>Inline Color Picker Control from Script</a></td><td class='description'>This example demonstrates the use of an inline Color Picker instance built entirely with JavaScript.</td></tr>
<tr class='even'><td class='title'><a href='colorpicker/colorpicker-dialog-from-script.html'>Example of Color Picker Built in a Dialog via JavaScript</a></td><td class='description'>Color Picker interactions commonly call for the picker to be displayed as part of a floating dialog window; this example demonstrates how to create such an implementation while building the Color Picker's DOM structure via JavaScript.</td></tr>
<tr class='odd'><td class='title'><a href='colorpicker/colorpicker-dialog-from-markup.html'>Example of Color Picker Built in a Dialog from Markup</a></td><td class='description'>Color Picker interactions commonly call for the picker to be displayed as part of a floating dialog window; this example demonstrates how to create such an implementation while placing the Color Picker's DOM structure on the page prior to instantiating the picker.</td></tr>
<tr class='even'><td class='title'><a href='colorpicker/colorpicker-custom.html'>Example of Specifying Custom Labels and Element IDs for Color Picker</a></td><td class='description'>When you want to have multiple Color Pickers on the same page, or when you want to internationalize them, you'll need to customize element IDs and/or form-control labels.  This example shows you how.</td></tr>
<tr class='odd'><td class='title'><a href='colorpicker/colorpicker-skinning.html'>Skinning Example</a></td><td class='description'>Many YUI Controls have CSS "skins" that define their look and feel.  The default skin for YUI is the Sam Skin.  This example calls out the CSS used to skin the Color Picker control.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Container Family</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='container/module.html'>The Module Control</a></td><td class='description'>The Module is a JavaScript representation of modular HTML content; all Container controls implement Module as a base class.</td></tr>
<tr class='even'><td class='title'><a href='container/overlay.html'>Creating and Positioning an Overlay</a></td><td class='description'>The Overlay class extends Module and creates a piece of modular content that floats above the page, outside of the page flow.  In this example, we look at how to create and position an Overlay.</td></tr>
<tr class='odd'><td class='title'><a href='container/tooltip.html'>Simple Tooltip Example</a></td><td class='description'>Creating and styling a simple Tooltip.</td></tr>
<tr class='even'><td class='title'><a href='container/tooltip-multi.html'>One Tooltip, Many Context Elements</a></td><td class='description'>You can reuse the same Tooltip instance to provide Tooltip effects for many elements, conserving browser resources and improving performance along the way.</td></tr>
<tr class='odd'><td class='title'><a href='container/panel.html'>Simple Panel Example</a></td><td class='description'>This example implements two simple Panels, one from markup and one purely from script, and shows how to configure options like draggability.</td></tr>
<tr class='even'><td class='title'><a href='container/panelskin1.html'>Skinning a Panel with Custom CSS: Introduction</a></td><td class='description'>In this example, we explore simple techniques for using CSS to customize the look and feel of a Panel Control instance.</td></tr>
<tr class='odd'><td class='title'><a href='container/panelskin2.html'>Skinning a Panel with Custom CSS: Advanced</a></td><td class='description'>Building on the introductory skinning example, here we'll look at customizing mulitple Panel instances in the same document.</td></tr>
<tr class='even'><td class='title'><a href='container/panel-loading.html'>Creating a Modal "Loading" Panel</a></td><td class='description'>This example shows how to use a Panel Control instance to display a modal "loading" or "please wait" message.</td></tr>
<tr class='odd'><td class='title'><a href='container/panel-resize.html'>Creating a Resizable Panel</a></td><td class='description'>In this example, we look at how Panel can be combined with the Resize utility to create resizable Panel Control instances.</td></tr>
<tr class='even'><td class='title'><a href='container/dialog-quickstart.html'>Dialog Quickstart Example</a></td><td class='description'>This example demonstrates the most common use-case for the Dialog control &mdash; collecting data from the user and sending it to the server using XMLHttpRequest (Ajax) via the YUI Connection Manager.</td></tr>
<tr class='odd'><td class='title'><a href='container/simpledialog-quickstart.html'>SimpleDialog Quickstart Example</a></td><td class='description'>This example demonstrates the most common use-case for the SimpleDialog control &mdash; a control best used for simple ok/cancel or yes/no dialog forms.</td></tr>
<tr class='even'><td class='title'><a href='container/container-effect.html'>Using ContainerEffect Transitions</a></td><td class='description'>The ContainerEffect object allows you to implement built-in transitions to fade-in/out or slide-in/out your Containers as they show and hide.</td></tr>
<tr class='odd'><td class='title'><a href='container/overlaymanager.html'>Using the Overlay Manager to Manage Multiple Panels</a></td><td class='description'>Overlay Manager makes it easy to manage the interaction of many Panels within the same window, giving focus to the window that is selected and keeping its z-index higher than that of its peers.</td></tr>
<tr class='even'><td class='title'><a href='container/keylistener.html'>Implementing Container Keyboard Shortcuts with KeyListener</a></td><td class='description'>The KeyListener class, included with the Event Utility, makes it easy to tie keyboard shortcuts to specific actions in your application.</td></tr>
<tr class='odd'><td class='title'><a href='container/container-ariaplugin.html'>Using the Container ARIA Plugin</a></td><td class='description'>The Container ARIA Plugin makes it easy to use the WAI-ARIA Roles and States with the Container family of controls.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>DataTable Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='datatable/dt_basic.html'>Basic Example</a></td><td class='description'>A demonstration of the DataTable's basic feature set.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_enhanced.html'>Progressive Enhancement</a></td><td class='description'>A progressively enhanced DataTable based on existing markup.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_formatting.html'>Custom Cell Formatting</a></td><td class='description'>Custom formatting for DataTable cells.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_row_coloring.html'>Conditional row coloring</a></td><td class='description'>Coloring DataTable rows using custom column formatters.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_nestedheaders.html'>Nested Headers</a></td><td class='description'>Nested column headers.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_xhrjson.html'>JSON Data Over XHR</a></td><td class='description'>The display of tabular JSON data retrieved via XHR.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_xhrpostxml.html'>XML Data Over XHR With POST</a></td><td class='description'>The display of XML data retrieved via an XHR POST request.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_xhrtext.html'>Textual Data Over XHR</a></td><td class='description'>The display of textual data retrieved over XHR</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_xhrlocalxml.html'>Local XML Data</a></td><td class='description'>The display of XML data placed locally within the page by Connection Manager.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_polling.html'>Polling the DataSource</a></td><td class='description'>Polling the DataSource for data at regular intervals</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_rowdatamod.html'>Adding, Updating, and Deleting Rows</a></td><td class='description'>Adding, updating, and deleting row data.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_clientpagination.html'>Client-side Pagination</a></td><td class='description'>The use of client-side pagination to break up a dataset into manageable, page-sized chunks.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_clientsorting.html'>Client-side Sorting</a></td><td class='description'>Client-side Column sort using a custom function.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_dynamicdata.html'>Server-side Pagination and Sorting for Dynamic Data</a></td><td class='description'>Server-side pagination and sorting for dynamic data.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_bhm.html'>Integrating Browser History Manager with Server-side Pagination and Sorting</a></td><td class='description'>Integration of Browser History Manager and DataTable, with server-side pagination and sorting enabled.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_fixedscroll.html'>XY-scrolling, Y-scrolling, and X-scrolling</a></td><td class='description'>Scrolling along x, y, or xy axes.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_rowselect.html'>Row Selection</a></td><td class='description'>Row selection models.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_cellselect.html'>Cell Selection</a></td><td class='description'>Cell selection models.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_cellediting.html'>Inline Cell Editing</a></td><td class='description'>Implementing inline cell editing.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_colshowhide.html'>Showing, Hiding, and Reordering Columns.</a></td><td class='description'>Showing, hiding, and reordering Columns.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_highlighting.html'>Highlighting Cells, Rows, or Columns</a></td><td class='description'>Enable highlighting on cells, rows, or columns</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_contextmenu.html'>Context Menu Integration</a></td><td class='description'>Integration of DataTable with the the <a href='http://developer.yahoo.com/yui/menu'>Menu Control</a>'s ContextMenu feature.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_tabview.html'>TabView Integration</a></td><td class='description'>Integration of DataTable with the the <a href='http://developer.yahoo.com/yui/menu'>Menu Control</a>'s ContextMenu feature.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_complex.html'>Complex Example of Multiple Features</a></td><td class='description'>Several features combined into one DataTable.</td></tr>
<tr class='odd'><td class='title'><a href='datatable/dt_autocomplete.html'>Datatable with Autocomplete</a></td><td class='description'>Use an AutoComplete Control to filter Datatable results.</td></tr>
<tr class='even'><td class='title'><a href='datatable/dt_skinning.html'>Skinning Model</a></td><td class='description'>An explanation of DataTable's skinning model.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>ImageCropper Control (beta)</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='imagecropper/simple_crop.html'>Simple Crop Interface</a></td><td class='description'>This example shows how to make an image croppable.</td></tr>
<tr class='even'><td class='title'><a href='imagecropper/adv_crop.html'>Advanced Crop Interface</a></td><td class='description'>This example shows how to make an image croppable with some advanced features.</td></tr>
<tr class='odd'><td class='title'><a href='imagecropper/feedback_crop.html'>Real Time Crop Feedback</a></td><td class='description'>This example shows how to use a few of the built in events to real time crop feedback.</td></tr>
<tr class='even'><td class='title'><a href='imagecropper/conn_crop.html'>Connection Manager assisted image crop</a></td><td class='description'>This example shows how to use Connection Manager to issue an image crop request.</td></tr>
<tr class='odd'><td class='title'><a href='imagecropper/skinning_crop.html'>Skinning the ImageCropper</a></td><td class='description'>ImageCropper skinning is done via CSS.  The ImageCropper comes with a default skin, but you can extend or override this as needed.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Layout Manager</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='layout/page_layout.html'>Full Page Layout</a></td><td class='description'>This example shows how to build a full page layout.</td></tr>
<tr class='even'><td class='title'><a href='layout/panel_layout.html'>Layout inside a resizable Panel</a></td><td class='description'>This example shows how to build a layout inside of a resizable Panel Control.</td></tr>
<tr class='odd'><td class='title'><a href='layout/grids_layout.html'>Using a Layout with Grids CSS</a></td><td class='description'>This example shows how to use the Layout Manager with the Grids CSS.</td></tr>
<tr class='even'><td class='title'><a href='layout/nested_layout.html'>Nesting a layout</a></td><td class='description'>Nesting a layout inside another layout.</td></tr>
<tr class='odd'><td class='title'><a href='layout/menu_layout.html'>Layout with Menu Controls</a></td><td class='description'>Using a full page Layout with top and left Menu navigation</td></tr>
<tr class='even'><td class='title'><a href='layout/calrte_layout.html'>Simple Application</a></td><td class='description'>A simple date entry application.</td></tr>
<tr class='odd'><td class='title'><a href='layout/adv_layout.html'>Complex Application</a></td><td class='description'>An advanced application using several YUI Utilities and Controls.</td></tr>
<tr class='even'><td class='title'><a href='layout/skinning_layout.html'>Skinning a Layout</a></td><td class='description'>Layout skinning is done via CSS.  The Layout Manager comes with a default skin, but you can extend or override this as needed.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Menu Family</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='menu/example01.html'>Basic Menu From Markup</a></td><td class='description'>Basic Menu From Markup</td></tr>
<tr class='even'><td class='title'><a href='menu/example02.html'>Basic Menu From JavaScript</a></td><td class='description'>Basic Menu From JavaScript</td></tr>
<tr class='odd'><td class='title'><a href='menu/example03.html'>Grouped Menu Items Using Markup</a></td><td class='description'>Grouped Menu Items Using Markup</td></tr>
<tr class='even'><td class='title'><a href='menu/example04.html'>Grouped Menu Items Using JavaScript</a></td><td class='description'>Grouped Menu Items Using JavaScript</td></tr>
<tr class='odd'><td class='title'><a href='menu/example05.html'>Grouped Menu Items With Titles From Markup</a></td><td class='description'>Grouped Menu Items With Titles From Markup</td></tr>
<tr class='even'><td class='title'><a href='menu/example06.html'>Grouped Menu Items With Titles From JavaScript</a></td><td class='description'>Grouped Menu Items With Titles From JavaScript</td></tr>
<tr class='odd'><td class='title'><a href='menu/example07.html'>Multi-tiered Menu From Markup</a></td><td class='description'>Multi-tiered Menu From Markup</td></tr>
<tr class='even'><td class='title'><a href='menu/example08.html'>Multi-tiered Menu From JavaScript</a></td><td class='description'>Multi-tiered Menu From JavaScript</td></tr>
<tr class='odd'><td class='title'><a href='menu/example09.html'>Handling Menu Click Events</a></td><td class='description'>Handling Menu Click Events</td></tr>
<tr class='even'><td class='title'><a href='menu/example10.html'>Listening For Menu Events</a></td><td class='description'>Listening For Menu Events</td></tr>
<tr class='odd'><td class='title'><a href='menu/example11.html'>MenuItem Configuration Properties</a></td><td class='description'>MenuItem Configuration Properties</td></tr>
<tr class='even'><td class='title'><a href='menu/example12.html'>Setting Menu Configuration Properties At Runtime</a></td><td class='description'>Setting Menu Configuration Properties At Runtime</td></tr>
<tr class='odd'><td class='title'><a href='menu/leftnavfrommarkup.html'>Website Left Nav With Submenus Built From Markup</a></td><td class='description'>Website Left Nav With Submenus Built From Markup</td></tr>
<tr class='even'><td class='title'><a href='menu/leftnavfromjs.html'>Website Left Nav With Submenus From JavaScript</a></td><td class='description'>Website Left Nav With Submenus From JavaScript</td></tr>
<tr class='odd'><td class='title'><a href='menu/topnavfrommarkup.html'>Website Top Nav With Submenus Built From Markup</a></td><td class='description'>Website Top Nav With Submenus Built From Markup</td></tr>
<tr class='even'><td class='title'><a href='menu/topnavfromjs.html'>Website Top Nav With Submenus From JavaScript</a></td><td class='description'>Website Top Nav With Submenus From JavaScript</td></tr>
<tr class='odd'><td class='title'><a href='menu/leftnavfrommarkupwithanim.html'>Website Left Nav Using Animation With Submenus Built From Markup</a></td><td class='description'>Website Left Nav Using Animation With Submenus Built From Markup</td></tr>
<tr class='even'><td class='title'><a href='menu/leftnavfromjswithanim.html'>Website Left Nav Using Animation With Submenus From JavaScript</a></td><td class='description'>Website Left Nav Using Animation With Submenus From JavaScript</td></tr>
<tr class='odd'><td class='title'><a href='menu/topnavfrommarkupwithanim.html'>Website Top Nav Using Animation With Submenus Built From Markup</a></td><td class='description'>Website Top Nav Using Animation With Submenus Built From Markup</td></tr>
<tr class='even'><td class='title'><a href='menu/topnavfromjswithanim.html'>Website Top Nav Using Animation With Submenus From JavaScript</a></td><td class='description'>Website Top Nav Using Animation With Submenus From JavaScript</td></tr>
<tr class='odd'><td class='title'><a href='menu/contextmenu.html'>Context Menu</a></td><td class='description'>Context Menu</td></tr>
<tr class='even'><td class='title'><a href='menu/tablecontextmenu.html'>Adding A Context Menu To A Table</a></td><td class='description'>Adding A Context Menu To A Table</td></tr>
<tr class='odd'><td class='title'><a href='menu/treeviewcontextmenu.html'>Adding A Context Menu To A TreeView</a></td><td class='description'>Adding A Context Menu To A TreeView</td></tr>
<tr class='even'><td class='title'><a href='menu/programsmenu.html'>OS-Style Programs Menu</a></td><td class='description'>OS-Style Programs Menu</td></tr>
<tr class='odd'><td class='title'><a href='menu/applicationmenubar.html'>Application Menubar</a></td><td class='description'>Application Menubar</td></tr>
<tr class='even'><td class='title'><a href='menu/menuwaiaria.html'>Using the Menu ARIA Plugin</a></td><td class='description'>The Menu ARIA Plugin makes it easy to use the WAI-ARIA Roles and States with the Menu family of controls.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Paginator</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='paginator/pag_getting_started.html'>Getting started with Paginator</a></td><td class='description'>A demonstration of the basic setup of a Paginator.</td></tr>
<tr class='even'><td class='title'><a href='paginator/pag_multiple_containers.html'>Rendering controls into multiple containers</a></td><td class='description'>A demonstration of how Paginator keeps all controls in sync.</td></tr>
<tr class='odd'><td class='title'><a href='paginator/pag_manual_render.html'>Manually rendering Paginator UI Components</a></td><td class='description'>Distributing individual Paginator ui components exclusive of the containers config.</td></tr>
<tr class='even'><td class='title'><a href='paginator/pag_configuration.html'>Configuring the Paginator</a></td><td class='description'>Exhibition of Paginator instance configuration.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Rich Text Editor</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='editor/flickr_editor.html'>Flickr Image Search</a></td><td class='description'>This example adds a button that opens a custom panel containing an AutoComplete Control that can be used to retrieve photos from <a href="http://flickr.com/">Flickr</a>.</td></tr>
<tr class='even'><td class='title'><a href='editor/cal_editor.html'>Calendar Plugin</a></td><td class='description'>This example adds a button to the Rich Text Editor's Toolbar that displays a Calendar control for choosing dates. It also demonstrates how to manage the state of a custom button.</td></tr>
<tr class='odd'><td class='title'><a href='editor/icon_editor.html'>Icon Insertion</a></td><td class='description'>This example adds a button that opens a custom panel to insert custom icons.</td></tr>
<tr class='even'><td class='title'><a href='editor/switch_editor.html'>Plain Text Switcher</a></td><td class='description'>This example demonstrates how to toggle from a plain text field to the Rich Text Editor with a simple button click.</td></tr>
<tr class='odd'><td class='title'><a href='editor/post_editor.html'>Editor Data Post with Connection Manager</a></td><td class='description'>This example posts data to the server with Connection Manager and returns filtered data.</td></tr>
<tr class='even'><td class='title'><a href='editor/skinning_editor.html'>Skinning the Editor</a></td><td class='description'>Editor skinning is done via CSS.  The Editor comes with a default skin, but you can extend or override this as needed.</td></tr>
<tr class='odd'><td class='title'><a href='editor/toolbar_editor.html'>Default Toolbar Config</a></td><td class='description'>Here you will find the default config for the Editor's toolbar.</td></tr>
<tr class='even'><td class='title'><a href='editor/code_editor.html'>Code Editor</a></td><td class='description'>This example demonstrates how to build a Source Editor.</td></tr>
<tr class='odd'><td class='title'><a href='editor/tabview_editor.html'>Editor inside a Tabview Control</a></td><td class='description'>Placing an Editor inside of a Tabview Control.</td></tr>
<tr class='even'><td class='title'><a href='editor/multi_editor.html'>One Editor, Multiple Edit Areas</a></td><td class='description'>Have one Editor control several editable areas on a single page.</td></tr>
<tr class='odd'><td class='title'><a href='editor/imagebrowser_editor.html'>Editor with Custom Image Browser</a></td><td class='description'>Use a custom image browser for image insertion into the editor.</td></tr>
<tr class='even'><td class='title'><a href='editor/simple_editor.html'>Simple Editor &mdash; Basic Buttons</a></td><td class='description'>Using the SimpleEditor Control with Basic Buttons.</td></tr>
<tr class='odd'><td class='title'><a href='editor/simple_adv_editor.html'>Simple Editor &mdash; Advanced Buttons</a></td><td class='description'>Using the SimpleEditor Control with Advanced Buttons.</td></tr>
<tr class='even'><td class='title'><a href='editor/editor_adv_editor.html'>Editor &mdash; Basic Buttons</a></td><td class='description'>Using the Editor Control with Basic Buttons.</td></tr>
<tr class='odd'><td class='title'><a href='editor/autoheight_editor.html'>Editor Auto Adjusting Height</a></td><td class='description'>Using the autoHeight config to make the Editor change it's height based on the content.</td></tr>
<tr class='even'><td class='title'><a href='editor/dialog_editor.html'>Editor in a Dialog Control</a></td><td class='description'>It's easy to use the Rich Text Editor to enhance a textarea within a Dialog Control; this example shows you how.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Slider Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='slider/slider-simple.html'>Basic Vertical Slider</a></td><td class='description'>This example demonstrates how to create a simple slider, how to consume the values it produces when a user interacts with the control, and how to programmatically update the slider's state.</td></tr>
<tr class='even'><td class='title'><a href='slider/slider-ticks.html'>Horizontal Slider with Tick Marks</a></td><td class='description'>This example implements a slider with tick marks.</td></tr>
<tr class='odd'><td class='title'><a href='slider/slider-rgb.html'>RBG Slider Control</a></td><td class='description'>This example demonstrates how to use the slider as a building block for a more complex widget.  It employs three slider instances that work together to produce RGB values.</td></tr>
<tr class='even'><td class='title'><a href='slider/slider_vert_swapped.html'>Bottom to top Vertical Slider</a></td><td class='description'>This example demonstrates how to create a vertical slider with values increasing as the slider moves up.</td></tr>
<tr class='odd'><td class='title'><a href='slider/slider_dual_thumb.html'>Horizontal Slider with two thumbs</a></td><td class='description'>This example demonstrates how to create a Slider with two thumbs.</td></tr>
<tr class='even'><td class='title'><a href='slider/slider_dual_with_highlight.html'>Dual-thumb Slider with range highlight</a></td><td class='description'>This example demonstrates how to create a dual-thumb slider with the enclosed range highlighted.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>TabView Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='tabview/frommarkup.html'>Build from Markup</a></td><td class='description'>How build a TabView widget from markup.</td></tr>
<tr class='even'><td class='title'><a href='tabview/fromscript.html'>Build from Script</a></td><td class='description'>How to build a TabView widget from script.</td></tr>
<tr class='odd'><td class='title'><a href='tabview/addtab.html'>Adding Tabs</a></td><td class='description'>This demonstrates how to dynamically add tabs.</td></tr>
<tr class='even'><td class='title'><a href='tabview/removetab.html'>Removing Tabs</a></td><td class='description'>This demonstrates how to dynamically remove tabs.</td></tr>
<tr class='odd'><td class='title'><a href='tabview/datasrc.html'>Getting Content from an External Source</a></td><td class='description'>This demonstrates how to load Tab content from an external source.</td></tr>
<tr class='even'><td class='title'><a href='tabview/skinning.html'>Skinning TabView</a></td><td class='description'>TabView skinning is done via CSS.  The TabView comes with a default skin, but you can extend or override this as needed.</td></tr>
<tr class='odd'><td class='title'><a href='tabview/tabview-ariaplugin.html'>Using the TabView ARIA Plugin</a></td><td class='description'>The TabView ARIA plugin makes it easy to use the WAI-ARIA Roles and States with the TabView control.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>TreeView Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='treeview/default_tree.html'>Default TreeView</a></td><td class='description'>This example creates a simple tree with default settings and randomly populates its nodes.</td></tr>
<tr class='even'><td class='title'><a href='treeview/dynamic_tree.html'>Dynamically Loading Node Data</a></td><td class='description'>You can improve the rendering time of your TreeView control by deferring the loading of child nodes until they are requested.  When a node expands, you can use <a href='http://developer.yahoo.com/yui/connection'>the YUI Connection Manager</a> to retrieve information via XMLHttpRequest about that node's children.</td></tr>
<tr class='odd'><td class='title'><a href='treeview/folder_style.html'>Folder-Style TreeView Design</a></td><td class='description'>By using an alternative CSS file, you can modify the appearance of the TreeView Control; in this example, the TreeView implements a folder-style iconography.</td></tr>
<tr class='even'><td class='title'><a href='treeview/menu_style.html'>Menu-Style TreeView Design</a></td><td class='description'>By using an alternative CSS file, you can modify the appearance of the TreeView Control; in this example, the TreeView implements a menu-style iconography.  It also makes use of the Menu Node, in which only one child at each depth level can remain open.</td></tr>
<tr class='odd'><td class='title'><a href='treeview/customicons.html'>Using TreeView with Custom Icons</a></td><td class='description'>Applying a specific label style to each node allows you to customize the icons that each node displays.</td></tr>
<tr class='even'><td class='title'><a href='treeview/tasklist.html'>Custom TreeView with Check Boxes</a></td><td class='description'>In this example, the TreeView icons are represented by checkboxes allowing for a task-list-style display.</td></tr>
<tr class='odd'><td class='title'><a href='treeview/tv_tooltip.html'>TreeView with Tooltips</a></td><td class='description'>In this example, the a single Tooltip is configured to work with all of the nodes in the tree.</td></tr>
<tr class='even'><td class='title'><a href='treeview/tv-markup.html'>Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal </a></td><td class='description'>TreeView supports a number of different inputs for creating the node structure, including consuming existing markup on the page.  This example takes you through three common mechanisms for defining a TreeView.</td></tr>
<tr class='odd'><td class='title'><a href='treeview/tv-edit.html'>Inline Editing of TreeView Node Labels</a></td><td class='description'>TreeView has intrinsic support for user-editing of node labels.  This example explores the interaction model for inline editing with TreeView.  It also illustrates the use of a special date-editor class that leverages the <a href='http://developer.yahoo.com/yui/calendar/'>YUI Calendar Control</a>.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Uploader Control (beta)</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='uploader/uploader-simple-button.html'>Simple Uploader Example With Button UI</a></td><td class='description'>A demonstration of core features of the Uploader Control. In this example, the Uploader control is rendered as a sprite-skinned button. The user is allowed to select a single file and upload it to a specified location. The upload progress is tracked and reported back to the user.</td></tr>
<tr class='even'><td class='title'><a href='uploader/uploader-advanced-postvars.html'>Advanced Uploader Example With Additional POST Variables and Server Data Return</a></td><td class='description'>This advanced Uploader example is rendered as a transparent overlay UI over a text link. It allows the user to upload a single file, along with additional POST variables, and displays the data returned back from the server.</td></tr>
<tr class='odd'><td class='title'><a href='uploader/uploader-advanced-cookie.html'>Advanced Uploader Example With Cookie Submission as a POST variable</a></td><td class='description'>This advanced Uploader example demonstrates setting of a document cookie and attaching the cookie data as a variable in the file upload POST request. The backend server echoes the submitted data, ascertaining that the cookie data has been received.</td></tr>
<tr class='even'><td class='title'><a href='uploader/uploader-advanced-queue.html'>Advanced Uploader Example With Transparent UI and Automatic Queue Management</a></td><td class='description'>This advanced Uploader example is rendered as a transparent overlay UI over a text link. The uploader allows the user to upload multiple files, using built-in queue management, and reports back progress.</td></tr>
</tbody>
</table>

<h2>Developer Tools</h2><table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Logger Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='logger/log_basic.html'>Basic Logging</a></td><td class='description'>Demonstrates basic logging functionality.</td></tr>
<tr class='even'><td class='title'><a href='logger/log_reading.html'>Configuring LogReader</a></td><td class='description'>LogReader configurations</td></tr>
<tr class='odd'><td class='title'><a href='logger/log_writing.html'>Using LogWriter</a></td><td class='description'>Use LogWriter to write logs from a custom source.</td></tr>
<tr class='even'><td class='title'><a href='logger/log_autocomplete.html'>Logger Integration with YUI Components</a></td><td class='description'>Point to the debug build of a YUI component to read built-in log messages with Logger.</td></tr>
<tr class='odd'><td class='title'><a href='logger/log_skinning.html'>Skinning Model</a></td><td class='description'>Explanation of Logger's skinning model.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>Profiler</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='profiler/profiler-simple-example.html'>Simple Profiling Example</a></td><td class='description'>Demonstrates basic usage of the Profiler for profiling functions.</td></tr>
<tr class='even'><td class='title'><a href='profiler/profiler-object-example.html'>Object Profiling Example</a></td><td class='description'>Demonstrates usage of the Profiler for profiling objects.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>ProfilerViewer Control</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='profilerviewer/pv-basic.html'>Simple Profiling</a></td><td class='description'>A simple use case profiling a <a href='http://developer.yahoo.com/yui/calendar'>Calendar Control</a> instance with the ProfilerViewer Control.</td></tr>
<tr class='even'><td class='title'><a href='profilerviewer/pv-api.html'>Using the ProfilerViewer API while Profiling the YUI Menu Control</a></td><td class='description'>In this example, profiling a simple set of menus and submenus, ProfilerViewer's API is leveraged to place the console in a floating, draggable palette.</td></tr>
<tr class='odd'><td class='title'><a href='profilerviewer/pv-bootstrap.html'>Using Profiler and ProfilerViewer to Profile non-YUI Code</a></td><td class='description'>This example explores the best strategy for using YUI to profile projects that are not YUI-based; it shows you how to load only the minimal YUI footprint during profiling, deferring the loading of ProfilerViewer (and its YUI dependencies) until you're ready to view the profiling data.</td></tr>
<tr class='even'><td class='title'><a href='profilerviewer/pv-skin.html'>Skinning the ProfilerViewer Control</a></td><td class='description'>ProfilerViewer's 'skin' is provided via a combination of CSS and other style information passed via JavaScript to the Flash-based <a href='http://developer.yahoo.com/yui/charts'>Charts Control</a>.  This example helps you understand where to start if you want to customize the look and feel of a ProfilerViewer implementation.</td></tr>
<tr class='odd'><td class='title'><a href='profilerviewer/pv-spanish.html'>ProfilerViewer Internationalization: Spanish</a></td><td class='description'>The ProfilerViewer Control can be easily internationalized by modifying the <code>STRINGS</code> member of <code>YAHOO.widget.ProfilerViewer</code>  In this example, a Spanish translation provided by Caridy Pati&ntilde;o Mayea is applied to the UI.</td></tr>
<tr class='even'><td class='title'><a href='profilerviewer/pv-german.html'>ProfilerViewer Internationalization: German</a></td><td class='description'>The ProfilerViewer Control can be easily internationalized by modifying the <code>STRINGS</code> member of <code>YAHOO.widget.ProfilerViewer</code>  In this example, a German translation provided by Christian Heilmann is applied to the UI.</td></tr>
</tbody>
</table>
<table class='examplesTable'>
<thead>
<tr><th class='title' colspan='2'><h3>YUI Test Utility</h3></th></tr></thead>
<tbody>
<tr class='odd'><td class='title'><a href='yuitest/yt-simple-example.html'>Simple Testing Example</a></td><td class='description'>Demonstrates basic usage of YUI Test for setting up and running tests.</td></tr>
<tr class='even'><td class='title'><a href='yuitest/yt-advanced-test-options.html'>Advanced Test Options</a></td><td class='description'>Demonstrates how to use advanced testing features such as defining tests that should fail, tests that should be ignored, and tests that should throw an error.</td></tr>
<tr class='odd'><td class='title'><a href='yuitest/yt-array-tests.html'>Array Processing</a></td><td class='description'>Demonstrates how to use the ArrayAssert object to test array data.</td></tr>
<tr class='even'><td class='title'><a href='yuitest/yt-async-test.html'>Asynchronous Testing</a></td><td class='description'>Demonstrates basic asynchronous tests.</td></tr>
<tr class='odd'><td class='title'><a href='yuitest/yt-async-event-tests.html'>Asynchronous Event Testing</a></td><td class='description'>Demonstrates using events with asynchronous tests.</td></tr>
</tbody>
</table>
			</div>
			<div class="yui-u" id="secondaryContent">
				
				<div id="module" class="firstContent">
					<p><img src="../assets/yui-candy.jpg" width="180" height="120"></p>
					<h3>YUI Web Sites We Love</h3>
					
					<p>The dozens of examples on this page are a worthwhile place to start, but the official YUI examples are just the tip of the iceberg when it comes to YUI sample code and YUI-powered sites from which you can gather additional ideas.  Here are a few YUI-related sites that we find ourselves going back to again and again.</p>
					<ul>
						<li><a href="http://blog.davglass.com/files/yui/">Dav Glass's Blog</a>: Dav, who is now a member of the YUI team, has the most extensive set of YUI-focused examples anywhere on the web.</li>
                        <li><a href="http://www.satyam.com.ar/yui/">Satyam's YUI Site</a>: Satyam is a well-known YUI expert who has assisted thousands of developers with their YUI implementations.</li>
					</ul>
				</div>
				
				
		  </div>


	
		</div>
	</div>
</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../docs/index.html">API Documentation</a></li><li class="selected "><a title="Examples of every YUI utility and control in action" href="../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../examples/charts/index.html">Charts (experimental)</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2009 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>

</body>
</html>
<!-- presentbright.corp.yahoo.com uncompressed/chunked Thu Feb 19 10:53:04 PST 2009 -->
